import React, {useEffect, useState} from 'react';
import style from './Home.module.scss'
//引入EChars
import * as echarts from 'echarts';
//引入请求库
import {homeIncomeApi, homeIncomeListApi, homeOrderApi, homeOrderListApi} from '../../http/homeApi'

function Home() {
    //定义当前页面的状态
    const initState = {
        firstState:0,
        firstData:{
            payment:'22098.0',
            income:'3096.0',
            refund:'109.0'
        },
        secendState:0,
        secendData:{
            paymentOrder:'342',
            WriteOff:'234',
            refundOrder:'32'
        },
        firstDay:[]
    }
    const  [state ,setState ] = useState(initState)
    //获取最近七天的日期
    const getDayList =()=>{
        const day = Date.now()
        const getData = (toDay)=>{
            return toDay.getFullYear() + '-' + (toDay.getMonth()+1) + "-" + toDay.getDate()
        }
        let dayView = []
        setState({
            ...state,firstDay:[]
        })
        for (var i =0 ;i<7 ;i++){
            dayView.unshift(getData(new Date(day-(i*86400000))))
        }
        return dayView
    }


    //EChars 初始化的函数
    const firstEChars = ()=> {
        homeIncomeListApi()
            .then(res=>{
                console.log(res.data.data)
                if (res.data.code ==200 ){
                    var myChart = echarts.init(document.getElementById('firstMain'));
                    // 指定图表的配置项和数据
                    const series = res.data.data.map((item)=> {
                        return {
                            data:item.data,
                            type: 'line'
                        }
                    })
                    var option = {
                        title: {
                            text: '收入趋势'
                        },
                        tooltip: { data: ['支付','收入','退款']},
                        legend: {
                            data: ['支付','收入','退款']
                        },
                        xAxis: {
                            type: 'category',
                            data:  getDayList()
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name:'支付',
                                type: 'line',
                                data:res.data.data[0]
                            },
                            {
                                name:'收入',
                                type: 'line',
                                data:res.data.data[1],
                            },
                            {
                                name:'退款',
                                type: 'line',
                                data:res.data.data[2]
                            },
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            })

    }
    const secendEChars = ()=> {
        homeOrderListApi()
            .then(res=>{
                console.log(res.data.data)
                if (res.data.code ==200 ){
                    var myChart = echarts.init(document.getElementById('secendMain'));
                    // 指定图表的配置项和数据
                    const series = res.data.data.map((item)=> {
                        return {
                            data:item.data,
                            type: 'line'
                        }
                    })
                    var option = {
                        title: {
                            text: '订单趋势'
                        },
                        tooltip: { data: ['支付','收入','退款']},
                        legend: {
                            data: ['支付','核销','退款']
                        },
                        xAxis: {
                            type: 'category',
                            data:  getDayList()
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name:'支付',
                                type: 'bar',
                                data:res.data.data[0]
                            },
                            {
                                name:'核销',
                                type: 'bar',
                                data:res.data.data[1],
                            },
                            {
                                name:'退款',
                                type: 'bar',
                                data:res.data.data[2]
                            },
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            })

    }
    // const secendEChars = ()=> {
    //     var myChart = echarts.init(document.getElementById('secendMain'));
    //     // 指定图表的配置项和数据
    //     var option = {
    //         xAxis: {
    //             data: ['A', 'B', 'C', 'D', 'E']
    //         },
    //         yAxis: {},
    //         series: [
    //             {
    //                 name:'sss',
    //                 data: [10, 22, 28, 43, 49],
    //                 type: 'bar',
    //                 stack: 'x'
    //             },
    //             {
    //                 name:'sssq',
    //                 data: [5, 4, 3, 5, 10],
    //                 type: 'bar',
    //                 stack: 'x'
    //             }
    //         ]
    //     };
    //
    //     // 使用刚指定的配置项和数据显示图表。
    //     myChart.setOption(option);
    // }

    //页面加载时请求数据
    useEffect(()=>{
        firHanlder(0);
        secHanlder(0);
        firstEChars()
        secendEChars()
    },[])
    //修改收入概况的显示区间
    const firHanlder = (num) =>{
        homeIncomeApi({time:num})
            .then(res=>{
                if(res.data.code ==200){
                    setState({
                        ...state,firstState:num,firstData:res.data.data
                    })
                }
            })
    }

    //修改订单概况显示区间
    const secHanlder = (num) =>{
        homeOrderApi({time:num})
            .then(res=>{
                if(res.data.code ==200){
                    setState({
                        ...state,secendState:num,secendData:res.data.data
                    })
                }
            })
    }



    return (
        <div className={style.box}>
            <div className={style.item_box}>
                <div className={style.fir_head}>
                    <div className={style.fir_left}>收入概况</div>
                    <div  className={style.fir_right }>
                        <div  className={state.firstState==0?style.fir_right_on:''} onClick={()=>firHanlder(0)}>今日</div>
                        <div className={state.firstState==1?style.fir_right_on:''} onClick={()=>firHanlder(1)}>7日</div>
                        <div className={state.firstState==2?style.fir_right_on:''} onClick={()=>firHanlder(2)}>30日</div>
                    </div>
                </div>
                <div className={style.fir_mian}>
                    <div className={style.fir_mian_item}>
                        <div className={style.fir_title}>支付</div>
                        <div>{state.firstData.payment}</div>
                    </div>
                    <div className={style.fir_mian_item}>
                        <div className={style.fir_title}>收入</div>
                        <div>{state.firstData.income}</div>
                    </div>
                    <div className={style.fir_mian_item}>
                        <div className={style.fir_title}>退款</div>
                        <div>{state.firstData.refund}</div>
                    </div>

                </div>
            </div>
            <div className={style.item_box}>
                <div className={style.fir_head}>
                    <div className={style.fir_left}>订单概况</div>
                    <div  className={style.fir_right }>
                        <div  className={state.secendState==0?style.fir_right_on:''} onClick={()=>secHanlder(0)}>今日</div>
                        <div className={state.secendState==1?style.fir_right_on:''} onClick={()=>secHanlder(1)}>7日</div>
                        <div className={state.secendState==2?style.fir_right_on:''} onClick={()=>secHanlder(2)}>30日</div>
                    </div>
                </div>
                <div className={style.fir_mian}>
                    <div className={style.fir_mian_item}>
                        <div className={style.fir_title}>支付订单</div>
                        <div>{state.secendData.paymentOrder}</div>
                    </div>
                    <div className={style.fir_mian_item}>
                        <div className={style.fir_title}>核销订单</div>
                        <div>{state.secendData.WriteOff}</div>
                    </div>
                    <div className={style.fir_mian_item}>
                        <div className={style.fir_title}>退款订单</div>
                        <div>{state.secendData.refundOrder}</div>
                    </div>

                </div>
            </div>
            <div className={style.item_box}  id="firstMain">
            </div>
            <div className={style.item_box} id="secendMain"></div>

        </div>
    );
}

export default Home;